<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>后台管理</title>
 
  <style>
    body{
      background: rgb(238, 242, 255);
    }


    .header{
    width: 100%;
    height:60px;
    display: flex;
    flex-direction: row;
    position: relative;
    background: rgb(255, 255, 255);
    border-radius: 7px;
    border-bottom: 1px solid rgba(187, 187, 187, 0.753);
    box-shadow: 0 0 1px rgb(65, 40, 90);
   
    
   
  }
  .header_title{
    font-family: cursive ;  /*把 font-family: "设置字体名称" 里的字体名称改成你需要*/
    /* //字体大小 */
    font-size:33px ;
    /* //字体颜色 */
    color:rgb(45, 113, 172) ;
    /* //加粗 normal默认值 bold粗体 数值100-900 */
    font-weight:normal;

    margin: 10px ;
   
  }
  .rightadmin{
    margin: 18px;
    position: absolute;
    right: 0;

   
  }
  
  .rightadmin_span{
    margin-right: 20px;
  }

  .nav_left{
    display: flex;
    flex-direction: column;
    background: white;
    width: 14%;
    height: 800px;
    margin-right: 20px;
    box-shadow: 2px 1px 1px rgba(93, 22, 185, 0.144);
    float: left;

  }

  .nav_title{
    color: rgb(44, 43, 43);
    height: 23px;
    margin-left: 3px;
    padding: 10px 10px;
    width: 128px;
    font-family: cursive ; 
    font-size:16px ;
    font-weight:900;
    text-shadow: 2px 2px 4px #c0c0c0;
    position: relative;
    
  }


  .nav_title:hover{

    color: rgb(243, 237, 237);
   
    background: rgb(156, 121, 245);

    border-radius: 7px;

    text-shadow: 2px 2px 4px #000000;

    
   
  }

  .nav_title span{
    position: absolute;
    left: 30px;
   
  
  }

  .nav_title img{
  
    position: absolute;
    top: 8px;

  }



  .nav_head{
    color: rgb(116, 116, 116);
    
  }

  .contain_right{

    
   margin-top: 1%;

    margin-left: 16%;
  
    height: 700px;
    width: 84%;
    border-radius: 6px;
    background: white;
   
    box-shadow: -2px -2px 2px rgba(93, 22, 185, 0.144);
  }

  .Welcome{
    position: absolute;
        margin: 100px;
  }

  .welcome_Title{
    padding-top: 20px;
    font-size: 60px;

    font-family: cursive ;  /*把 font-family: "设置字体名称" 里的字体名称改成你需要*/
   
    /* //字体颜色 */
    color:rgb(45, 113, 172) ;
    /* //加粗 normal默认值 bold粗体 数值100-900 */
    font-weight:normal;
  }

  .table-container{
    padding-top: 10px;
    margin: 10px;
  }
  .table-container p{
    font-size: 22px;
    font-weight:500;
  }







  .table11_3 table {
        width:100%;
        margin:15px 0;
        border:0;

        
    }
    .table11_3 th {
        background-color:rgba(233, 232, 232, 0.377);
        color:rgb(39, 39, 39);
      
    }
    .table11_3,.table11_3 th,.table11_3 td {
        font-size:20px;   
        text-align:center;
        padding:4px;
        border-collapse:collapse;

    
    }

    .table11_3 tr {
        border: 1px solid #ffffff;
    }

   

    .table11_3 td{
      width: 17.995%;
      color: rgb(34, 21, 21);
      border-bottom: 2px solid rgba(139, 139, 139, 0.192);
      font-weight:200;
    }



  .table11_3 td{
      width: 17.995%;
      color: rgb(34, 21, 21);
      border-bottom: 2px solid rgba(139, 139, 139, 0.192);
      font-weight:200;
    }

#appealList td{
  width: 14.5%;
}


    .editbtn{
   
    background:linear-gradient(315deg, #7cd8d2 0%, #03c86c 74%);
    border: none;
    border-radius: 10px;
    font-family: 'Lato', sans-serif;
 
    font-size: 15px;
    color: #fff;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
    position: relative;
    z-index: 0;
}
.editbtn::before{
    position:absolute;
    content: '';
    left: 0;
    bottom:0;
    width: 100%;
    height: 0;
    transition: all 0.3s ease;
    border-radius: 10px;
    background: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
    z-index: -1;
}
.editbtn:hover::before{
    top: 0;
    height: 100%;
}
.editbtn:active{
    top: 2px;
}
    







/* 22 */
.deleteB{
   
   background:linear-gradient(315deg, #f56666 0%, #c21d00 74%);
   border: none;
   border-radius: 10px;
   font-family: 'Lato', sans-serif;

   font-size: 15px;
   color: #fff;
   box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
   7px 7px 20px 0px rgba(0, 0, 0, .1),
   4px 4px 5px 0px rgba(0, 0, 0, .1);
   outline: none;
   position: relative;
   z-index: 0;
}
.deleteB::before{
   position:absolute;
   content: '';
   left: 0;
   bottom:0;
   width: 100%;
   height: 0;
   transition: all 0.3s ease;
   border-radius: 10px;
   background:linear-gradient(315deg, #eba5a5 0%, #bd6252 74%);
   z-index: -1;
}
.deleteB:hover::before{
   top: 0;
   height: 100%;
}
.deleteB:active{
   top: 2px;
}
   

  
  </style>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="qs.js"></script>



</head>
<body>

  <div id="app">


    
      <div class="header">
          <span class="header_title"> 大学实验开放平台</span> 
          <div class = "rightadmin ">
            <span class="rightadmin_span">Name</span>
    
            <span class="rightadmin_span">Role</span>
    
            <button> 退出</button>
    
          </div>
        </div>
    
    
        <div class="nav_left">
        
          <div style="margin-top: 15px; margin-left: 5px; ">
            <span class="nav_head">基础信息</span>
             <div class="nav_title" @click="ShowTeacher">  <img src="教师.png" width="20px" height="20px" alt="">  <span>教师信息管理</span>  </div>
             <div class="nav_title" @click="ShowStudent">  <img src="学生.png" width="20px" height="20px" alt="">  <span>学生信息管理</span>  </div>
          </div>
            
          <div style=" margin-left: 5px;">
            <span class="nav_head">器材</span>
              <div class="nav_title" @click="ShowYiQi">  <img src="仪器管理.png" width="20px" height="20px" alt="">   <span>实验仪器管理 </span> </div>
            <div class="nav_title"@click="ShowCaiLiao"> <img src="化工新材料.png" width="20px" height="20px" alt="">     <span>实验材料管理</span>   </div>
            <div class="nav_title" @click="ShowAppeal"> <img src="预约单.png" width="20px" height="20px" alt="">     <span>实验器材申请</span>   </div>
          </div>
            
          <div style=" margin-left: 5px;">
            <span class="nav_head">实验室</span>
            <div class="nav_title" @click="ShowLab">  <img src="实验室房间.png" width="20px" height="20px" alt="">     <span>实验室管理</span>     </div>
              <div class="nav_title" @click="ShowLabAppeal">  <img src="申请.png" width="20px" height="20px" alt="">     <span>实验室预约申请</span>    </div>
      
          </div>
            
    
            <div class="nav_title"@click="ShowLog" > <img src="日志.png" width="20px" height="20px" alt="">     <span>用户登录日志</span>   </div>
        </div>
    
        <!-- 表信息 -->
        <div class="contain_right"> 
             
          <!-- <div class="Welcome">
              <p class="welcome_Title"> 欢迎来到 </p>  
              <p class="welcome_Title" >大学实验开放平台-后台管理端</p>
          </div> -->
    
          <!-- 教师表 -->
          <div class="table-container" v-show="isShowTeacher">
            <p>教师信息</p>
              <table class=table11_3>
                  <tr>
                      <th> 姓名</th><th>编号</th><th>部门</th> <th>院系</th><th>状态</th><th>操作</th>
                  </tr>
        
                  <tr>
                      <td>姓名</td><td>编号</td><td>部门</td> <td>院系</td><td>介绍</td>
                      <td> 
                        <button class="editbtn">编辑</button> 
                        <button class="deleteB">删除</button> 
                      </td>
                  </tr>
                  <tr>
                      <td>姓名</td><td>编号</td><td>部门</td> <td>院系</td><td>介绍</td>
                      <td> 
                        <button class="editbtn">编辑</button> 
                        <button class="deleteB">删除</button> 
                      </td>
          
              
                  </tr>
                  <tr>
                      <td>姓名</td><td>编号</td><td>部门</td> <td>院系</td><td>介绍</td>
                      <td> 
                        <button class="editbtn">编辑</button> 
                        <button class="deleteB">删除</button> 
                      </td>
          
                  </tr>
                  <tr>
                      <td>姓名</td><td>编号</td><td>部门</td> <td>院系</td><td>介绍</td>
                      <td> 
                        <button class="editbtn">编辑</button> 
                        <button class="deleteB">删除</button> 
                      </td>
          
                  </tr>
              </table>
        
        
        
        
          </div>
          
           <!-- 学生表  -->
           <div class="table-container"  v-show="isShowStudent">
            <p>学生信息</p>
              <table class=table11_3>
                  <tr>
                      <th> 姓名</th><th>学号</th><th>专业</th> <th>性别</th><th>状态</th><th>操作</th>
                  </tr>
        
                  <tr>
                      <td>姓名</td><td>编号</td><td>部门</td> <td>院系</td><td>介绍</td>
                      <td> 
                        <button class="editbtn">编辑</button> 
                        <button class="deleteB">删除</button> 
                      </td>
                  </tr>
                  <tr>
                      <td>姓名</td><td>编号</td><td>部门</td> <td>院系</td><td>介绍</td>
                      <td> 
                        <button class="editbtn">编辑</button> 
                        <button class="deleteB">删除</button> 
                      </td>
          
              
                  </tr>
                  <tr>
                      <td>姓名</td><td>编号</td><td>部门</td> <td>院系</td><td>介绍</td>
                      <td> 
                        <button class="editbtn">编辑</button> 
                        <button class="deleteB">删除</button> 
                      </td>
          
                  </tr>
                  <tr>
                      <td>姓名</td><td>编号</td><td>部门</td> <td>院系</td><td>介绍</td>
                      <td> 
                        <button class="editbtn">编辑</button> 
                        <button class="deleteB">删除</button> 
                      </td>
          
                  </tr>
              </table>
        
        
        
        
          </div>
          
    
    
         <!-- 实验仪器表
        序号：从1开始到每页的最大条数
    器材名称：仪器名称，如砝码
    器材数量：仪器数量，如5个
    -->
    
          <div class="table-container" v-show="isShowYiQi" >
            <p>实验仪器表</p>
              <table class="table11_3">
                  <tr>
                      <th> 序号</th><th>器材名称</th><th>器材数量</th> <th>介绍</th><th>状态</th><th>操作</th>
                  </tr>
        
                  <tr>
                      <td>序号</td><td>器材名称</td><td>器材数量</td> <td>介绍</td><td>状态</td>
                      <td> 
                        <button class="editbtn">编辑</button> 
                        <button class="deleteB">删除</button> 
                      </td>
                  </tr>
                
                 
              </table>
        
        
        
        
          </div>
          
    
    <!-- 5.3.2	实验材料信息表 -->
    <div class="table-container" v-show = "isShowCaiLiao" >
      <p>实验材料信息表</p>
        <table class=table11_3>
            <tr>
                <th> 序号</th><th>材料名称</th><th>材料数量</th> <th>介绍</th> <th>状态</th><th>操作</th>
            </tr>
    
            <tr>
                <td>序号</td><td>器材名称</td><td>器材数量</td> <td>用于XXX实验 有XX特性</td><td>状态</td>
                <td> 
                  <button class="editbtn">编辑</button> 
                  <button class="deleteB">删除</button> 
                </td>
            </tr>
    
      </table>
    
    
    
    
    </div>
    
    
    <!-- 5.3.2	器材申请表
    序号：从1开始到每页的最大条数
    预约器材名称：实验材料名称，如盐酸
    预约器材数量：实验材料数量，如5瓶
    appealList
    -->
    <div class="table-container"  v-show = "isShowAppeal" >
      <p>器材申请表</p>
        <table class="table11_3" id="appealList" >
            <tr>
                <th> 序号</th><th>申请人</th><th>用途</th><th >申请器材名</th><th>申请数量</th> <th>状态</th><th>操作</th>
            </tr>
    
            <tr>
                <td>序号</td> <td>申请人</td> <td>用途</td>  <td   >器材名称</td><td>器材数量</td> <td>状态（待审批、待归还、已归还）</td>
                <td> 
                  <button class="editbtn">通过</button> 
                  <button class="deleteB">不通过</button> 
                  <!-- <button class="editbtn">归还</button>  -->
                </td>
            </tr>
    
      </table>
    
    
    
    
    </div>
    
    
    
    <!-- 实验室信息表 
    序号：从1开始到每页的最大条数
    实验室名称：实验材料名称，如盐酸
    实验室简介：实验材料数量，如5瓶
    实验室限制人数:实验室人数，如50人
    实验室用途：实验室用途，如化学实验
    实验室状态：实验室开放状态，如不开放
    
    -->
    
    <div class="table-container"v-show="isShowLab">
      <p>实验室信息</p>
        <table class=table11_3 >
            <tr>
                <th> 序号</th><th>实验室名称</th><th>限制人数</th> <th>用途</th><th>状态</th><th>操作</th>
            </tr>
    
            <tr>
                <td>序号</td><td>实验室名称</td><td>限制人数</td> <td>用途</td><td>状态</td>
                <td> 
                  <button class="editbtn">编辑</button> 
                  <button class="deleteB">删除</button> 
                </td>
            </tr>
           
          
          
        </table>
    
    
    
    
    </div>
    
    
    
        </div>
    
    

  </div>


    <script>
      var app = new Vue({
       el:"#app",
     
     data(){
       
     return {

       isShowTeacher:false,
       isShowStudent:false,
       isShowYiQi:false,
       isShowCaiLiao:false,
       isShowAppeal:false,
       isShowLab:false,
       isShowLabAppeal:false,
       isShowLog:false,

       isShowRegistry: false,
       formData: {
         username: "",
         password: "",
         role:"111",
         id:"1"
     }
   }
   },
     methods:{
   

         ShowTeacher:function(){
           this.isShowTeacher = true;         
           this.isShowStudent= false;
           this.isShowYiQi= false;
           this. isShowCaiLiao= false;
           this.isShowAppeal= false;
           this. isShowLab= false;
           this. isShowLabAppeal= false;
           this. isShowLog= false;
         },
        ShowStudent:function(){
        
           this.isShowTeacher= false;
           this.isShowStudent= true;
           this.isShowYiQi= false;
           this. isShowCaiLiao= false;
           this.isShowAppeal= false;
           this. isShowLab= false;
           this. isShowLabAppeal= false;
           this. isShowLog= false;
        }   ,
     
        ShowYiQi:function(){
        
           this.isShowTeacher= false;
           this.isShowStudent= true;
           this.isShowYiQi= false;
           this. isShowCaiLiao= false;
           this.isShowAppeal= false;
           this. isShowLab= false;
           this. isShowLabAppeal= false;
           this. isShowLog= false;
        }   ,

        ShowYiQi:function(){
       
           this.isShowTeacher= false;
           this.isShowStudent= false;
           this.isShowYiQi= true;
           this. isShowCaiLiao= false;
           this.isShowAppeal= false;
           this. isShowLab= false;
           this. isShowLabAppeal= false;
           this. isShowLog= false;
        }  ,

        
        ShowCaiLiao:function(){
         
           this.isShowTeacher= false;
           this.isShowStudent= false;
           this.isShowYiQi= false;
           this. isShowCaiLiao= true;
           this.isShowAppeal= false;
           this. isShowLab= false;
           this. isShowLabAppeal= false;
           this. isShowLog= false;
        }  ,

        ShowAppeal:function(){
        
           this.isShowTeacher= false;
           this.isShowStudent= false;
           this.isShowYiQi= false;
           this. isShowCaiLiao= false;
           this.isShowAppeal= true;
           this. isShowLab= false;
           this. isShowLabAppeal= false;
           this. isShowLog= false;
        }  ,
    
        ShowLab:function(){
       
           this.isShowTeacher= false;
           this.isShowStudent= false;
           this.isShowYiQi= false;
           this. isShowCaiLiao= false;
           this.isShowAppeal= false;
           this. isShowLab= true;
           this. isShowLabAppeal= false;
           this. isShowLog= false;
        }  ,
       
        ShowLabAppeal:function(){
         
           this.isShowTeacher= false;
           this.isShowStudent= false;
           this.isShowYiQi= false;
           this. isShowCaiLiao= false;
           this.isShowAppeal= false;
           this. isShowLab= false;
           this. isShowLabAppeal= true;
           this. isShowLog= false;
        }  ,

        ShowLog:function(){
       
           this.isShowTeacher= false;
           this.isShowStudent= false;
           this.isShowYiQi= false;
           this. isShowCaiLiao= false;
           this.isShowAppeal= false;
           this. isShowLab= false;
           this. isShowLabAppeal= false;
           this. isShowLog= true;
        }  ,


     onSubmit(event) {
       event.preventDefault();
       const _this = this;
       
   
       axios({
   
       method: 'post',
   
       url: "http://localhost:8081/index",
   
       headers: {
   
           'Content-Type': 'application/json;'
   
       },
       data: JSON.stringify(_this.formData),
   
   
       }).then (function (response) {
   
         console.log(_this.formData);
       console.log(response.data);
   
       }).catch (function (error) {
   
   
       console.log("error.data");
       console.log(_this.formData);
       });
   
         }
      ,
     
      onGet(event){
       event.preventDefault();
       const _this = this;
       
       axios({
   
   method: 'get',
   
   url: "http://localhost:8081/get/"+_this.formData.id,
   
   
   
   headers: {
   
       'Content-Type': 'application/json;'
   
   },
   
   
   }).then (function (response) {
   
     console.log(_this.formData);
   console.log(response.data);
   
   }).catch (function (error) {
   
   
   console.log("error.data");
   console.log(_this.formData);
   });
   
   
      }   
   
     
     
         
   
   }
   
         
     })
     </script>
   

</body>
</html>